<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getCustomerCfg()">
			<el-form-item>
				<el-row :gutter="1">
					<el-col :span="4" align="center">
						<div class="grid-content bg-purple">客户姓名:</div>
					</el-col>
					<el-col :span="6" align="left">
						<div class="grid-content bg-purple">
							<el-input v-model="dataForm.cusName" placeholder="请输入内容" clearable></el-input>
						</div>
					</el-col>
					<el-col :span="4" align="center">
						<div class="grid-content bg-purple">联系电话:</div>
					</el-col>
					<el-col :span="6" align="left">
						<div class="grid-content bg-purple">
							<el-input v-model="dataForm.cusPhone" placeholder="请输入内容" clearable></el-input>
						</div>
					</el-col>
					<el-col :span="3" align="center">
						<el-button @click="getCustomerCfg()" type="primary" round icon="el-icon-search">查询</el-button>
					</el-col>
				</el-row>
			</el-form-item>
			<br/>
			<el-form-item>
				<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(true)">新增</el-button>
				<el-button type="warning" icon="el-icon-edit" @click="addOrUpdateHandle(false)" :disabled="dataListSelections.length <= 0">修改</el-button>
				<el-button type="info" icon="el-icon-document" @click="selectDetailHandler(true)" :disabled="dataListSelections.length <= 0">查看详细</el-button>
				<el-button type="primary" icon="el-icon-document" @click="recordHandler(true)" :disabled="dataListSelections.length <= 0">操作记录</el-button>
				<el-button type="info" icon="el-icon-document" @click="fileUpload()">客户资料导入</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="delHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center" label="选择">
			</el-table-column>
			
			<el-table-column :prop="item.colName" header-align="center" align="center" :label="item.colValue" v-for="(item,idx) in customerCfgList" :key="idx">
				<template slot-scope="scope" >
					<el-popover placement="right" :content="scope.row[item.colName]" trigger="hover">
							<span slot="reference">
								<div style="height: 20px;">{{scope.row[item.colName] |fomatEnumToCH(item.colExtend)}}</div>
								<!-- <div style="height: 20px;">{{scope.row[item.colName]}}</div> -->
							</span>
					</el-popover>
				</template>
			</el-table-column>
			
			<el-table-column prop="cusCreateUsername" header-align="center" align="center" label="创建人">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.cusCreateUsername" trigger="hover">
						<span slot="reference">
							<div style="height: 20px;">{{scope.row.cusCreateUsername}}</div>
						</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="cusCreateDate" header-align="center" align="center" label="创建时间">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.cusCreateDate | formatDateTime" trigger="hover">
						<span slot="reference">
							<div style="height: 20px;"><i class="el-icon-time"></i> {{ scope.row.cusCreateDate |formatDateTime }}</div>
						</span>
					</el-popover>
				</template>
			</el-table-column>
			
		</el-table>
		<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<manage-detail ref="manageDetail"></manage-detail>
		<manage-add ref="manageAdd" @refreshDataList="getDataList"></manage-add>
		<manage-update ref="manageUpdate" @refreshDataList="getDataList"></manage-update>
		<record ref="record" @refreshDataList="getDataList"></record>
		<file-upload ref="fileUpload" @refreshDataList="getDataList"></file-upload>
	</div>
</template>
<script>
	import dateUtil from '@/utils/dateUtil'
	import enumCaseUtil from '@/utils/enumCaseUtil'
	import ManageDetail from './cc-customer-data-manage-detail'
	import ManageAdd from './cc-customer-data-manage-add'
	import Record from './cc-customer-data-manage-record'
	import ManageUpdate from './cc-customer-data-manage-update'
	import FileUpload from './cc-customer-model-fileUpload'
	export default {
		data() {
			return {
				dataForm: {
					cusName: '',
					cusPhone: '',

				},
				dataList: [],
				dataListLoading: false,
				dataListSelections: [],
				customerCfgList:[],
				page: 1,
				limit: 10,
				totalPage: 0,
				id: '',
			}
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			},
			fomatEnumToCH(val,keys){
				return enumCaseUtil.fomatEnumToCH(val,keys)
			}
		},
		components: {
			ManageAdd,
			ManageUpdate,
			ManageDetail,
			FileUpload,
			Record,
		},
		activated() {

		},
		created() {
			this.getCustomerCfg()
			//this.getParams()
		},
		methods: {
			getParams() {
				// 取到路由带过来的参数 
				// var routerParams = this.$route.query.dataObj
				// console.log('routerParams')
				// console.log(routerParams)
				// if(routerParams != undefined) {
				// 	if(this.$route.query.type == 0) {
				// 		this.dataForm.cusName = routerParams
				// 		this.$nextTick(() => {
				// 			setTimeout(
				// 				this.getDataList(), 100);
				// 		})
				// 	} else {
				// 		this.dataForm.cusPhone = routerParams
				// 		this.$nextTick(() => {
				// 			setTimeout(
				// 				this.getDataList(), 100);
				// 		})
				// 	}

				// }
			},
			//获取配置的客户资料
			getCustomerCfg() {
				var that = this
				this.$http.post('/cc/customer/config/getCustomerCfg', {}).then(res => {
					if(res.data.code == '0'){
						that.customerCfgList = res.data.data
						that.page = 1
						that.getDataList()
					}
				})
			},			
			// 获取数据列表
			getDataList() {
				var that = this
				this.dataListLoading = true
				this.$http.post('/cc/customer/manage/page', {
					page: this.page,
					limit: this.limit,
					cusName: this.dataForm.cusName,
					cusPhone: this.dataForm.cusPhone,
				}).then(res => {
					console.log("获取客户资料数据列表==>",res.data)
					that.dataList = res.data.data;
					that.totalPage = res.data.count
					that.dataListLoading = false
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.limit = val
				this.page = 1
				this.getDataList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.page = val
				this.getDataList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			uuid() {
				var len = len || 32;
				var chars = '1234567890abcdefhijkmnprstwxyz';
				var maxPos = chars.length;
				var uuid = '';
				for(var i = 0; i < len; i++) {
					uuid += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return uuid;
			},
			// 新增 / 修改,
			addOrUpdateHandle(val) {
				if(val) {
					this.$refs.manageAdd.init(val)
				} else {
					// 修改
					if(this.dataListSelections.length > 1) {
						this.$message({
							message: '不能一次修改多个',
							type: 'warning'
						});
					} else if(this.dataListSelections.length == 0) {
						this.$message({
							message: '请选择一个客户进行修改',
							type: 'warning'
						});
					} else {
						this.$nextTick(() => {
							this.$refs.manageUpdate.init(this.dataListSelections[0].id)
						})
					}
				}
			},
			selectDetailHandler(val) {
				//查看详情
				if(this.dataListSelections.length > 1) {
					this.$message({
						message: '不能一次查看多个客户详细信息',
						type: 'warning'
					});
				} else if(this.dataListSelections.length == 0) {
					this.$message({
						message: '请选择一个客户信息进行查看',
						type: 'warning'
					});
				} else {
					this.$nextTick(() => {
						this.$refs.manageDetail.init(this.dataListSelections[0].id)
					})
				}
			},
			recordHandler(){
				//查看操作记录
				if(this.dataListSelections.length > 1) {
					this.$message({
						message: '不能一次查看多个客户资料修改记录',
						type: 'warning'
					});
				} else if(this.dataListSelections.length == 0) {
					this.$message({
						message: '请选择一个客户信息进行查看',
						type: 'warning'
					});
				} else {
					this.$nextTick(() => {
						this.$refs.record.init(this.dataListSelections[0].id)
					})
				}
			},

			fileUpload() {
				console.log("1111");
				this.$refs.fileUpload.init();
			},
			delHandle(){
				var that = this;
				this.$confirm('确定删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var dataList = that.dataListSelections;
					var ids = "";
					for(var i = 0; i < dataList.length; i++) {
						if(ids == ''){
							ids = dataList[i].id;
						} else {
							ids = ids + "-" + dataList[i].id;
						}
					}
						this.$http.post('/cc/customer/manage/delete',{
							ids
						}).then(resp => {
							if(resp.data && resp.data.code === '0'){
								that.$message({message: '删除成功', type: 'success'})
								that.getDataList()
							}else{
								that.$message.error('删除失败')
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
	}
</script>
